<template>
  <div id="app1">
    <span @click="showPopup" style="font-size: 16px;  line-height: 10vh; padding-left: 3.6vw">{{ placeholder }}</span>
    <!-- <img @click="showPopup" class="imgSrv" :src="file[0].fileList.length != 0 ? file[0].fileList[0].url : resultImg" alt /> -->
    <!-- <van-popup closeable v-model="show" get-container="#app1" style="height: 80vh; width: 80vw; z-index: 999999999999999">
      <div class="bottom">
        <vue-esign ref="esign" :width="widths" :height="1700" class="mySign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
      </div>
      <div class="dialog-footer">
        <el-button size="mini" @click="handleReset" type="primary">重签</el-button>
        <el-button size="mini" @click="handleGenerate" type="primary">确定</el-button>
      </div>
    </van-popup> -->
    <!-- <van-field style="display: inline-block;" v-model="name"/> -->
    <span style="font-size: 16px; float: right; line-height: 10vh; padding-left: 6.6vw">{{ name }}</span>
  </div>
</template>

<script>
import Vue from 'vue'
import { preventReClick } from '@/utils/plugins'
import { base64toFile } from './FilePare'
import { dataTransFile, FileServerProxy, dataTransFilePreview } from '@/utils/api'
Vue.use(preventReClick)
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false, // 弹框是否开启
      name:'',
      widths: 800,
      lineWidth: 6, // 画笔的线条粗细
      lineColor: '#000000', // 画笔的颜色
      bgColor: '', // 画布的背景颜色
      resultImg: '', // 最终画布生成的base64图片
      isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
      time: '',
      //   heightE: '200',
      title: '改、 扩、翻建',
      title1: '杭州市临安区青山湖街道孝村村６组孝村２５－１号',
      data1: [],
      data2: '',
      formData: [],
      isShowValue: true,
      show: false
    }
  },
  props: {
    placeholder: String,
    GROUPGUID: String,
    ROW_GUID: String,
    file: Array
  },
  methods: {
    // 清空画板
    handleReset() {
      this.$refs.esign.reset()
      this.isShowValue = false
    },
    
    showPopup(){this.show = true},
    handle() {},
    // 生成签字图
    handleGenerate() {
      let me = this
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res
          //将base64的文件转为文件流
          const file1 = base64toFile(this.resultImg, this.GROUPGUID)
          this.getFileServerUpload(file1, this.GROUPGUID)
          console.log(file1)
          // me.$parent.DJJCData[imgSrc1]=this.resultImg
          // console.log(me.$parent.DJJCData[imgSrc1],'bncuesdhfue');
          // this.$emit("callBack",)
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
        })
      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      setTimeout(() => {
        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
      }, 200)
      this.show = false
    },
    //上传文件
    async getFileServerUpload(file, GROUPGUID) {
      let data = {
        toRowGuid: this.ROW_GUID,
        groupGuid: GROUPGUID,
        token: window.localStorage.getItem('token')
      }
      let formData = new FormData()
      formData.append('file', file)
      formData.append('accessCode', '7a3fc061c866434b8475d3775c9ddcea')
      formData.append('cityCode', window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000')
      formData.append('token', window.localStorage.getItem('token'))
      formData.append('paramStr', JSON.stringify(data))
      const res = await dataTransFile(formData)
      let data1 = JSON.parse(res.data.data).FileList
      this.fileGuid = data1[0].FILEGUID
      if (data1[0].FILEGUID) {
        this.$toast.success('上传成功!')
      }
    },
    //回显
    //获取相关材料
    getFile1: async function () {
      let me = this
      let groupGuid = []
      groupGuid.push(this.GROUPGUID)
      let params = {
        accessCode: '1fdcbce42c6d4748a020feba618d54b8',
        cityCode: window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000',
        params: {
          groupGuid: this.GROUPGUID,
          toRowGuid: this.ROW_GUID,
          token: window.localStorage.getItem('token')
        }
      }
      const res1 = await FileServerProxy(params)
      let ress = JSON.parse(res1.data.data)
      if (ress.FilesInfo && ress.FilesInfo.length > 0) {
        ress.FilesInfo.forEach((element) => {
          this.file.forEach((item) => {
            element['file'] = {
              name: element.FILENAME
            }
            this.getFileUrl(element, item)
          })
        })
      }
      console.log(this.file)
    },
    //获取附件文件流
    getFileUrl: async function (element, item) {
      let formData = new FormData()
      formData.append('accessCode', '98bcf528966e48ce896a8b3fd02d45d5')
      formData.append('cityCode', window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : '441300000000')
      formData.append(
        'paramStr',
        JSON.stringify({
          fileGuid: element.ROW_GUID
        })
      )
      let response = await dataTransFilePreview(formData)
      if (response) {
        var img = new Blob([new Int8Array(response.data, 0)], {
          type: response.headers['content-type']
        }) //type类型可自定义
        element['isImage'] = true
        element['url'] = window.URL.createObjectURL(img)
        //生成的url只能访问一次
        if (element.FILETYPE == '.pdf') {
          item.FileName.push(element)
        } else {
          item.fileList.push(element)
        }
      }
      // console.log(this.file)
    }
  },
  mounted() {
    this.name = window.localStorage.getItem('DanDianName')
    setTimeout(() => {
      this.isShowValue = false
    }, 1500)
    setTimeout(() => {
      this.getFile1()
    }, 500)
  },
  created() {
    var date = new Date()
    this.time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日' //表示当前日期
  }
}
</script>

<style lang="scss" scoped>
#app1 {
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;
  height: 10vh;
//   position: relative;
  -webkit-text-size-adjust: none;
  font-size: 16px;
  overflow: auto;

  .spanStyle {
    text-decoration: underline;
  }

  pre {
    white-space: pre-wrap;
    /*css-3*/
    white-space: -moz-pre-wrap;
    /*Mozilla,since1999*/
    white-space: -pre-wrap;
    /*Opera4-6*/
    white-space: -o-pre-wrap;
    /*Opera7*/
    word-wrap: break-word;
    line-height: 34px;
  }

  .checkMan {
    // border: 1px solid #e9e9e9;
    padding-top: 4px;
    padding: 10px;

    .title {
      text-align: center;
    }

    h2 {
      margin-bottom: 20px;
    }

    .el-button {
      margin-bottom: 20px;
    }

    img {
      width: 15%;
      //   height: 80px;
    }
  }

  .imgSrv {
    float: right;
    transform: rotate(270deg);
    width: 20vw;
    height: 10vh;
    line-height: 10vh;
    margin-right: 10px;
  }

  .button2 {
    width: 100%;
    height: 40px;
    background: #007aff;
    line-height: 40px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    margin: 0 10px;
  }

  .button3 {
    width: 100%;
    background: #007aff;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    margin: 0 10px;
  }

  .bottom {
    position: absolute;
  }

  .dialog-footer {
    position: relative;
    left: 38px;
    top: 38%;
    transform-origin: left 50%;
    transform: rotate(90deg);
  }
}

.el-dialog__body {
  // 设置一下签字区域的虚线边框
  .mySign {
    border: 1px dashed #000;
    height: 80vh !important;
  }
}
</style>

<style>
.mySign {
  height: 80vh !important;
}
</style>
